<template>
	<view class="ys">

		<!-- 轮播图 -->
		<!-- <view class="swiper">
			<swiper :indicator-dots="true" circular="true" indicator-color="#fff" indicator-active-color="#ccc"
				:autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="swiper-item">
						<image :src="item.file_path" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		<view class="logo" :style="{paddingTop:topStyle}">
			<image src="/static/new/logo.png" mode="widthFix"></image>
		</view>
		<view class="kefu">
			<view class="left">
				<text class="gou"></text>
				千万魔兽玩家的选择
			</view>
			<button class="talk" open-type="contact">
				<uni-icons type="headphones" color="#FFD256" size="20"></uni-icons>
				<view class="talk-text">
					<text>联系客服</text>
					<text class="time">08:00~24:00</text>
				</view>
			</button>
		</view>
		<view class="chart">
			<view class="clist">
				<view class="citem">
					<image src="/static/new/member.png" mode="widthFix"></image>
					<view class="c-text">
						<view class="title">
							当前会员数
						</view>
						<view class="num">
							{{user_count || 0}}
						</view>
					</view>
				</view>
				<view class="citem">
					<image src="/static/new/order.png" mode="widthFix"></image>
					<view class="c-text">
						<view class="title">
							累计完成订单
						</view>
						<view class="num">
							{{order_count || 0}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noticebox" v-if="noticeList.length > 0">
			<view class="notice">
				<uni-notice-bar backgroundColor="transparent" color="#FFD256" show-icon scrollable
					@click="toPage('/pages/news/list')" :text="noticeList[0].title" />
			</view>
		</view>
		<view class="nav">
			<view class="navbox">
				<view class="title">
					品质代练
				</view>
				<view class="nav-table">
					<view class="left" @click="totwPage('/pages/classlist/index')">
						<image src="/static/new/place_order_bg.png" mode="widthFix"></image>
						<view class="l-info">
							<view class="l-top">
								<text class="xd-title">下单中心</text>
								<text class="xd-text">大神专业代练</text>
							</view>
							<text class="xd">现在下单</text>
						</view>
					</view>
					<view class="right">
						<view class="r-top" @click="toPage('/pages/classlist/order')">
							<image src="/static/new/accept_order_bg.png" mode="widthFix"></image>
							<view class="t-info">
								<text class="jd-title">接单中心</text>
								<text class="jd-text">轻松接单</text>
								<text class="jd">立即接单></text>
							</view>
						</view>
						<view class="bot">
							<view class="bitem" @click="toPage('/pages/classlist/reward')">
								<image src="/static/new/reward_bg.png" mode="widthFix"></image>
								<text>悬赏大厅</text>
							</view>
							<view class="bitem" @click="toPage('/pages/news/activity')">
								<image src="/static/new/activity_bg.png" mode="widthFix"></image>
								<text>活动列表</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 导航栏 -->
		<!-- 	<view class="nav">
			<view class="navbox">
				<view class="nav-tab" @click="totwPage('/pages/classlist/index')">
					<image :src="menuConf && menuConf.nav_1.path || '/static/icon/xd.png'" mode="aspectFill"></image>
					<text>下单中心</text>
				</view>
				<view class="nav-tab" @click="toPage('/pages/classlist/order')">
					<image :src="menuConf && menuConf.nav_2.path || '/static/icon/ijd.png'" mode="aspectFill"></image>
					<text>接单中心</text>
				</view>
				<view class="nav-tab" @click="toPage('/pages/classlist/reward')">
					<image :src="menuConf && menuConf.nav_3.path || '/static/icon/ixs.png'" mode="aspectFill"></image>
					<text>悬赏大厅</text>
				</view>
				<button open-type="contact" class="nav-tab">
					<view class="imgbox">
						<image :src="menuConf && menuConf.nav_4.path || '/static/icon/kf.png'" mode="aspectFill">
						</image>
						<i>08:00~24:00</i>
					</view>
					<text>联系客服 </text>
				</button>
			</view>
		</view> -->

		<!-- 专区 -->
		<view class="nav">
			<view class="navlist">
				<view :class="nid == item.id?'nitem on':'nitem'" v-for="(item,index) in navlist" :key="index"
					@click="changeNav(item)">
					<view class="nitem-text">
						<!-- {{item.name}} -->
						正式服商品
					</view>
				</view>

			</view>
		</view>
		<!-- <view class="newsbox">
			<view class="newslist" v-for="(item,index) in newslist" :key="index"
				@click="toPage(`/pages/news/detail?id=${item.id}`)">
				<view class="imgbox">
					<image :src="item.path || '/static/index/logo.png'" mode="aspectFill"></image>
				</view>
				<view class="newsinfo">
					<view class="title">
						{{item.title}}
					</view>
					<view class="desc">
						{{item.description}}
					</view>
					<view class="time">
						{{item.create_time}}
					</view>
				</view>
			</view>
		</view> -->
		<view class="hot">
			<view class="goods">
				<view class="goodsitem" v-for="(item,index) in goods" :key='item.id'
					@click="toPage('/pages/goodsdetail/index?id='+item.id)">
					<image :src="item.cover_path" mode="aspectFill"></image>
					<view class="info">
						<text class="name">{{item.name}}</text>
						<text class="des">{{item.sketch}}</text>
						<view class="price">
							<view>
								￥<text class="pricenum">{{item.price}}</text>
							</view>
							<view class="sell">
								已售:{{item.sales}}
							</view>
						</view>
					</view>
				</view>
				<view class="no-list" v-if="goods.length == 0">
					- 暂无数据 -
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Home,
		GoodsList,
		notice,
		news,
		hotGoods
	} from '@/api/api.js'
	export default {
		data() {
			return {
				goods: [],
				goods2: [],
				banner: [],
				conf: [],
				last_page: 1,
				page: 1,
				navlist: [],
				nid: 1,
				noticeList: [],
				style: {
					// 'background-image': '',
					'background-size': 'cover'
				},
				newslist: [],
				menuConf: '',
				topStyle: '',
				user_count: 0,
				order_count: 0
			}
		},
		onLoad() {
			this.IndexGoods()
			this.notice()
			// this.news()
			this.hotGoods()
			let info = uni.getWindowInfo()
			this.topStyle = info.statusBarHeight + 5 + 'px'
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.hotGoods()
			}
		},
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		methods: {
			hotGoods() {
				hotGoods({
					page: this.page
				}).then(res => {
					if (res.code == 0) {
						this.goods = this.goods.concat(res.data.data)
						this.last_page = res.data.last_page
					}

				})
			},
			news() {
				news({
					page: this.page
				}).then(res => {
					if (res.code == 0) {
						this.newslist = this.newslist.concat(res.data.data)
						this.last_page = res.data.last_page
					}
				})
			},
			notice() {
				notice({
					page: 1
				}).then(res => {
					if (res.code == 0) {
						this.noticeList = res.data.data
					}
				})
			},
			changeNav(item) {
				this.nid = item.id
				this.page = 1
				this.last_page = 1
				this.goods = []
				this.GoodsList()
			},
			GoodsList() {
				GoodsList({
					category_id: this.nid,
					page: this.page
				}).then(res => {
					if (res.code == 0) {
						this.goods = res.data.data
						this.last_page = res.data.last_page
					}
				})
			},
			IndexGoods() {
				Home().then(res => {
					if (res.code == 0) {
						this.banner = res.data.banner
						// this.navlist = res.data.category
						this.navlist = res.data.nav
						this.menuConf = res.data.conf
						this.nid = this.navlist[0].id
						this.user_count = (res.data.user_count).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
						this.order_count = (res.data.order_count).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
						// this.GoodsList()
					}
				})
			},
			totwPage(url) {
				uni.switchTab({
					url
				})
			},
			toPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			toTarPage(url) {
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.ys {
		height: 100%;
		min-height: 100vh;
		/* #ifdef H5 */
		min-height: calc(100vh - 50px);
		/* #endif */
		padding: 0 0 10px 0;
		box-sizing: border-box;
		position: relative;
		background-color: #050D1A;
	}

	.navbox {
		background: rgba(143, 124, 91, 0.2);
		flex-direction: column;
		padding: 15px;

		.title {
			font-weight: bold;
			color: #fff;
			font-size: 17px;
		}

		.nav-table {
			display: flex;
			align-items: stretch;
			margin-top: 20px;


			.left {
				width: 48%;
				position: relative;

				.l-info {
					position: absolute;
					width: 100%;
					height: 100%;
					padding: 15px;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					z-index: 99;
					top: 0;
					left: 0;


					.l-top {
						display: flex;
						flex-direction: column;

						.xd-title {
							font-weight: bold;
							color: #FFEFC3;
							font-size: 20px;
						}

						.xd-text {
							color: #DFDFDF;
							font-size: 15px;
							margin-top: 5px;
						}

					}

					.xd {
						background: linear-gradient(90deg, #795535 0%, #B2883A 100%);
						text-align: center;
						color: #fff;
						border-radius: 5px;
						padding: 10px 0;
						font-weight: bold;
						font-size: 16px;
					}
				}

				image {
					width: 100%;
					border-radius: 8px;
				}
			}

			.right {
				width: 52%;
				padding-left: 10px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.r-top {
					position: relative;
					width: 100%;

					image {
						width: 100%;
						border-radius: 5px;
					}

					.t-info {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						padding: 10px;
						box-sizing: border-box;

						.jd-title {
							color: #FFE9D9;
							font-weight: bold;
							font-size: 16px;
						}

						.jd-text {
							color: #CCCCCC;
							font-size: 12px;
							margin-top: 10px;
						}

						.jd {
							width: 80px;
							text-align: center;
							border-radius: 5px;
							font-size: 13px;
							color: #fff;
							padding: 5px 0;
							background: linear-gradient(90deg, #A96150 0%, #AC6D5E 100%);
							margin-top: 15px;
						}
					}
				}

				.bot {
					display: flex;
					align-items: center;
					width: 100%;
					justify-content: space-between;

					.bitem {
						width: 48%;
						position: relative;
						color: #95FFF5;
						font-weight: bold;
						font-size: 14px;

						text {
							position: absolute;
							top: 10px;
							left: 50%;
							width: 100%;
							text-align: center;
							transform: translate(-50%);
						}

						image {
							width: 100%;
							border-radius: 5px;
						}

						&:last-child {
							color: #B6D4FF;
						}
					}
				}
			}
		}

	}

	.chart {
		padding: 10px;

		.clist {
			background: rgba(143, 124, 91, 0.2);
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 8px;
		}


		.citem {
			width: 50%;
			display: flex;
			padding: 15px;
			box-sizing: border-box;

			image {
				width: 55px;
			}

			.c-text {
				padding-left: 5px;
				width: calc(100% - 55px);
				box-sizing: border-box;

				.title {
					color: #999999;
					font-size: 12px;
					margin-bottom: 10px;
				}

				.num {
					color: #DEB13F;
					font-weight: bold;
					font-size: 18px;
				}
			}

			&:first-child {
				.c-text {
					border-right: 1px solid #343B47;
				}
			}
		}
	}

	.logo {
		padding: 0 10px;
		box-sizing: border-box;

		image {
			width: 120px;
		}
	}

	.kefu {
		display: flex;
		align-items: center;
		color: #fff;
		justify-content: space-between;
		padding: 10px;
		box-sizing: border-box;

		.left {
			font-size: 17px;
			font-weight: bold;
		}

		button {
			background: rgba(143, 124, 91, 0.2);
			margin: 0;
			font-size: 14px;
			color: #FFD256;
			padding: 2px 10px;
			border-radius: 20px;
			height: 32px;
			line-height: 32px;
			font-weight: normal;
			display: flex;

			text {
				margin-right: 3px;
			}

			.talk-text {
				display: flex;
				flex-direction: column;
				color: #FFD256;
				line-height: normal;
				font-size: 12px;

				.time {
					transform: scale(.7);
				}
			}
		}
	}

	.newsbox {
		padding: 10px;

		.newslist {
			background: #1F2430;
			padding: 10px;
			box-sizing: border-box;
			border-radius: 5px;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 8;
			margin-bottom: 10px;

			.imgbox {
				width: 100px;
				height: 80px;

				image {
					width: 100%;
					height: 100%;
					border-radius: 6px;
				}
			}

			.newsinfo {
				width: calc(100% - 100px);
				padding-left: 15px;
				box-sizing: border-box;

				.title {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #fff;
					font-weight: bold;
					font-size: 16px;
				}

				.desc {
					font-size: 14px;
					color: #FFFFFF80;
					margin-top: 8px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.time {
					color: #FFFFFF80;
					margin-top: 10px;
					text-align: right;
					font-size: 12px;
				}
			}
		}
	}

	.icp {
		text-align: center;
		color: #333;
		padding: 10px 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		image {
			width: 30px;
			height: 30px;
			margin-bottom: 5px;
		}
	}

	.no-list {
		text-align: center;
		width: 100%;
	}

	.top {
		// background: $uni-bg-color;
		padding-bottom: 100px;
		padding-top: 20px;

		.news {
			text-align: right;
			padding-right: 5%;
			position: fixed;
			top: 8px;
			z-index: 99999;
			right: 2%;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.logo {
			display: flex;
			justify-content: center;
			padding-bottom: 30rpx;
			padding-top: 20rpx;

			image {
				width: 60%;
				height: 90px;
			}
		}

		.search {
			position: relative;
			width: 96%;
			background: #1F2430;
			border-radius: 5px;
			margin: 00px auto;
			display: flex;
			align-items: center;
			padding: 0 10px;
			box-sizing: border-box;
			padding-left: 20px;

			image {
				width: 20px;
				height: 20px;
			}

			input {
				width: 80%;
				margin-left: 10px;
				line-height: 40px;
				height: 40px;
				color: #f7f7f7;
				font-size: 14px;
			}


		}

	}

	.swiper {
		margin-top: -80px;
		height: 160px;
		border-radius: 10px;

		swiper {
			height: 160px;
		}

		.swiper-item {
			text-align: center;

			image {
				width: 96%;
				margin: 0 auto;
				height: 160px;
				border-radius: 5px;
			}
		}
	}

	.noticebox {
		padding: 0 10px;
		position: relative;
		z-index: 8;

		.notice {
			background: linear-gradient(90deg, rgba(203, 154, 68, 0.2) 0%, rgba(228, 203, 139, 0.2) 100%);
			padding: 8px 5px;
			border-radius: 8px;
		}
	}

	.nav {
		margin-top: 10px;
		padding: 0 10px;
		position: relative;
		z-index: 8;

		.navbox {
			display: flex;
			justify-content: space-around;
			border-radius: 8px;
			// padding: 10px 0;
		}

		.shop {
			display: flex;
			justify-content: space-between;
			background: #fff;
			border-radius: 8px;
			padding: 10px;
			align-items: center;

			image {
				width: 45px;
				height: 45px;

			}

			.shopinfo {
				flex: 1;
				padding-left: 10px;

				.name {
					font-weight: bold;
					font-size: 17px;
					margin-bottom: 5px;
				}

				.tips {
					color: #777;
					font-size: 12px;
				}
			}
		}

		.navlist {
			display: flex;
			background: transparent;
			overflow-x: scroll;
			white-space: normal;

			.nitem {
				padding: 10px;
				width: max-content;
				text-align: center;
				display: inline;
				justify-content: center;

				.nitem-text {
					width: 100%;
					text-align: center;
				}
			}

			.on {
				color: #E0C03F;
				position: relative;
				// border-radius: 4px;
				min-width: 50px;
				border-bottom: 2px solid #E0C03F;
				font-weight: bold;
			}
		}

		.nav-tab {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 0;
			background: transparent;
			padding: 0;
			line-height: normal;
			width: 25%;

			&::after {
				border: 0;
			}


			.imgbox {
				position: relative;

				i {
					position: absolute;
					color: #fff;
					bottom: 10px;
					left: 50%;
					transform: translate(-50%) scale(.7);
					font-size: 12px;
				}
			}

			image {
				width: 75px;
				height: 75px;
			}

			text {
				font-size: 13px;
				margin-top: 4px;
				color: #fff;
				height: 30px;
				text-align: center;
			}
		}

	}

	@keyframes hx {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(.8);
		}

		90% {
			transform: scale(1);
		}

		91% {
			transform: scale(1) translate(-2px);
		}

		92% {
			transform: scale(1) translate(2px);
		}

		93% {
			transform: scale(1) translate(-2px);
		}

		94% {
			transform: scale(1) translate(2px);
		}

		95% {
			transform: scale(1) translate(0px);
		}

		100% {
			transform: scale(1)
		}
	}

	.hot {
		margin-top: 15px;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 90%;
			margin: 0 auto;
			border-left: 4px solid #E0C03F;
			padding-left: 2%;
			margin-bottom: 10px;

			.name {
				color: #E0C03F;
				font-size: 15px;
				font-weight: bold;
			}

			.more {
				font-size: 12px;
				color: #999999;
			}
		}


		.goods {
			padding: 0 10px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.goodsitem {
				display: flex;
				flex-direction: column;
				width: 49%;
				margin-bottom: 10px;
				background: rgba(143, 124, 91, 0.2);
				border-radius: 8px;
				box-sizing: border-box;
				padding: 2px;

				image {
					width: 100%;
					height: 180px;
					border-radius: 5px;
				}

				.info {
					width: 100%;
					box-sizing: border-box;
					padding: 5px 0;
					padding-left: 10px;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
				}

				.name {
					font-size: 15px;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					font-weight: bold;
					color: #fff;
					margin-top: 5px;
				}

				.des {
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					font-size: 13px;
					color: #777;
					margin-top: 4px;
					display: none;
				}

				.sell {
					font-size: 12px;
					color: #8c8c8c;
					margin-top: 5px;
				}

				.price {
					color: #FFD256;
					font-size: 12px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-right: 10px;
					margin-top: 10px;

					.pricenum {
						font-size: 15px;
						font-weight: bold;
					}

					.buy {
						background: #F05050;
						color: #fff;
						width: 40px;
						text-align: center;
						padding: 4px 2px;
						border-radius: 4px;
						font-size: 12px;
						font-weight: bold;
					}

				}

				.vipprice {
					font-size: 14px;
				}
			}
		}
	}
</style>